<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/element.css" />
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/common.css" />
		<link rel="stylesheet" type="text/css" href="css/xcjl.css" />
		<script src="js/jquery-3.5.1.js"></script>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/element.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			[v-cloak] {
				display: none;
			}

			.el-date-editor.el-input, .el-date-editor.el-input__inner {
				width: 200px;
			}
		</style>
	</head>
	<body>
		<div id="app" v-cloak>
			<div class="page_root xcjl_page">
				<el-card class="box-card" shadow="never">
					<div class="title title1">种子质量监督抽查扦样现场记录单</div>
					<div class="content" style="margin-top: 20px">
						<el-form ref="form" :model="form" label-width="200px">
							<el-row>
								<el-col :span="10">
									<el-form-item label="扦样单位：">
										<el-input v-model="form.companyName2"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="10" :offset="4">
									<el-form-item label="扦样时间：">
										<span>{{form.date}}</span>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="10">
									<el-form-item label="扦样人员：">
										<el-select v-model="form.operator" multiple placeholder="请选择" style='width: 100%;'>
											<el-option v-for="item in employee" :key="item" :label="item" :value="item">
											</el-option>
										</el-select>
									</el-form-item>
								</el-col>
								<el-col :span="10" :offset="4">
									<el-form-item label="记录人：">
										<el-select v-model="form.recorder" multiple placeholder="请选择" style='width: 100%;'>
											<el-option v-for="item in employee" :key="item" :label="item" :value="item">
											</el-option>
										</el-select>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="10">
									<el-form-item label="扦样地点：">
										<span><u>{{form.sampleSite}}</u></span>
									</el-form-item>
								</el-col>
								<el-col :span="10" :offset="4">
									<el-form-item label="受检种子经营单位类型：">
										<span><u>{{form.companyType}}</u></span>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="10">
									<el-form-item label="被抽查单位陪同负责人：">
										<span><u>{{form.contacts}}</u></span>
									</el-form-item>
								</el-col>
								<el-col :span="10" :offset="4">
									<el-form-item label="联系电话：">
										<span><u>{{form.tel}}</u></span>
									</el-form-item>
								</el-col>
							</el-row>
							
							<div class="title title2">种子质量监督抽查扦样现场记录单</div>
							<div class="msg" @click="dialog1=true">
								<u>{{form.line1}}</u></div>
							<div class="msg">
								<u>2. 经询问被抽查单位  {{form.companyName}}  和查看生产经营档案，被抽查单位仓库内待销的种子品种有：{{form.cropName}}（{{form.cropType}}）等多个品种。</u>
							</div>
							<div class="msg">
								<u>3. 扦样人员随机抽查{{form.cropName}}等品种的种子，并按照《农作物种子检验规程》（GB/T 3543.1～7-1995）规定的技术要求完成扦样，扦样信息见《种子检验扦样单》（编号：{{form.sampleNos}}）。本次抽查的样品信息如下：</u>
							</div>
							
							<div class="xcjl-table">
								<table>
									<template v-for='(items,k) in form.descList'>
										<tr class="desc_row">
											<template v-for='(item, i) in items'>
												<td>
													<div class="desc_title" v-if="i==0">
														<div>{{items[i]}}:</div>
													</div>
													
													<div v-if="i>0" style="width: 200px;">
														<el-date-picker type="month" v-model="items[i]" value-format='yyyy年MM月' format='yyyy年MM月' v-if="[4,11].includes(k)"></el-date-picker>
														<!--<el-input type="text"  v-model="items[i]" :key="i"  v-if="[4,11].includes(k)" ></el-input>-->
														<el-input v-model="items[i]" :key="i" v-else></el-input>
													</div>
													
												</td>
											</template>
										</tr>
									</template>
								</table>
							</div>
							<div style="margin: 20px 0">
								<el-row>
									<el-col :span="12">
										<div>受检单位代表签字（盖章）：</div>
										<span style="margin-left: 200px">{{form.date}}</span>
									</el-col>
									<el-col :span="12">
										<div>扦样人员签字（盖章）：</div>
										<span style="margin-left: 200px">{{form.date}}</span>
									</el-col>
								</el-row>
							</div>
						</el-form>
					</div>
				</el-card>
			</div>

            <el-dialog :visible.sync="dialog1">
                <el-form>
                    <el-form-item>
                        <el-input type="textarea" rows="4" resize='none' v-model="form.line1" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
            </el-dialog>
		</div>



		<script type="text/javascript">
			new Vue({
				el: '#app',
				data: {
					// 样品集合
					ypItemActive: '1',
					ypList: [{
						title: '样品1',
						name: '1'
					}],
					employee:[],
					label1:'s',
                    dialog1:false,
					form:{
						companyName:'',
						companyName2:'',
						date:'',
						operator:[],
						recorder:[],
						sampleSite:'',
						companyType:'',
						contacts:'',
						tel:'',
						cropName:'',
						cropType:'',
						sampleNos:'',
						descList:[],
						line1:''
					},
				},
				watch: {
					// form监听
				    form: {
				         handler: function(val) {
				             console.log(val)
							 var xcjl = window.cache.xcjl
							 xcjl.operator = val.operator
							 xcjl.recorder = val.recorder

							 var sampleArr = window.cache.sampleArr;
							 var lettrtArr = window.cache.letterArr;
							 var len = sampleArr.length
							 this.form.descList
							 for(var i=0;i<len;i++){
								 this.form.descList[17][i+1] = this.form.descList[10][i+1] - this.form.descList[15][i+1]
								 this.form.descList[19][i+1] = this.form.descList[17][i+1] - this.form.descList[18][i+1]

                                 lettrtArr[i].seedNo = xcjl.descList[8][i+1]
							 }
				        },
				        deep: true
				    }
				
				} ,
				
				created() {
					window.cache = window.parent.cache;
					this.employee = window.cache.employee
					this.getData()
				},
				methods: {

					getData(){
						this.form = window.cache.xcjl
						var sampleArr = window.cache.sampleArr;
						var len = sampleArr.length
						if(len > 0){
							var obj = window.cache.getItemData(0,'sample')
							this.form.companyName = obj.companyName
							this.form.companyName2 = obj.companyName2
							this.form.date = obj.date
							this.form.sampleSite = obj.sampleSite
							this.form.companyType = obj.companyType
							this.form.contacts = obj.contacts
							this.form.tel = obj.tel
							this.form.cropName = obj.cropName
							this.form.cropType = obj.cropType
							this.form.tel = obj.tel
							this.form.sampleNos = obj.sampleNo
							if(len > 1){
								this.form.sampleNos +=  '~' + sampleArr[len - 1].sampleNo
							}
							var arr = window.cache.getXcjl().descList
							for(var i=0;i<len;i++){
								arr[0][i+1] = sampleArr[i].cropName
								arr[1][i+1] = sampleArr[i].producer
								arr[7][i+1] = sampleArr[i].contacts
								arr[12][i+1] = sampleArr[i].packingSize
								arr[13][i+1] = sampleArr[i].bzDate
								arr[14][i+1] = sampleArr[i].expiration
							}
							this.form.descList = arr
						}
					}
				}
			})
		</script>
	</body>
</html>
